<#include 'header.ftl'>
<div class="layui-layout-body">

    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">XCODE视频管理中心</div>
            <!-- 头部区域（可配合layui已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="">控制台</a></li>
                <li class="layui-nav-item"><a href="">用户</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">其它系统</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">邮件管理</a></dd>
                        <dd><a href="">消息管理</a></dd>
                        <dd><a href="">授权管理</a></dd>
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                        贤心
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="">基本资料</a></dd>
                        <dd><a href="">安全设置</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">退了</a></li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">所有商品</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">上传</a></dd>
                            <dd><a href="javascript:;">管理</a></dd>
                            <dd><a href="javascript:;">列表三</a></dd>
                            <dd><a href="">超链接</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">解决方案</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">列表一</a></dd>
                            <dd><a href="javascript:;">列表二</a></dd>
                            <dd><a href="">超链接</a></dd>
                        </dl>
                    </li>

                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <form class="layui-form">

                    <div class="layui-form-item">
                        <label class="layui-form-label">视频标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入手机或者邮箱账号"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">作者</label>
                        <div class="layui-input-block">
                            <input type="text" name="author" required lay-verify="required" placeholder="请输入手机或者邮箱账号"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上传</label>
                        <div class="layui-upload-drag" id="test10">
                            <i class="layui-icon"></i>
                            <p>点击上传，或将文件拖拽到此处</p>
                        </div>
                    </div>
                    <div class="layui-form-item" id="videores">
                        <label class="layui-form-label">地址</label>
                        <span class="layui-badge-rim" id="videourl"></span>
                        <input type="hidden" name="videou" id="videou">
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">上传</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © XCODE
        </div>
    </div>


    <script>

        layui.use(['upload', 'form', 'layer'], function () {
            var upload = layui.upload;
            var $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer

            layer.msg("欢迎来到XCODE中心");
            $("#videores").hide();

            //执行实例
            upload.render({
                elem: '#test10' //绑定元素
                , url: 'http://localhost:9090/video/testUploadFile' //上传接口
                , method: 'post'
                , accept: 'video'
                , done: function (res) {
                    //上传完毕回调
                    console.log(res)
                    $("#videores").show();
                    $("#videourl").text(res.data);
                    $("#videou").val(res.data);
                }
                , error: function () {
                    //请求异常回调
                    layer.msg("上传失败，请检查网络");
                }
            });

            form.on('submit(formDemo)', function (data) {
                alert(JSON.stringify(data.field));
                $.ajax({
                    url: 'http://localhost:9090/video/addVideo',
                    method: 'post',
                    contentType: 'application/json',
                    data: JSON.stringify(data.field), // 以json字符串方式传递
                    success: function (data) {
                        alert(data)
                    },
                    error: function (data) {
                        alert("信息发表失败，请检查网络连接。");
                    }
                });
                return false;
            });
        });
    </script>

</div>
<#include 'footer.ftl'>